output

output.filename：string，输出文件名

可以是一个纯粹的文件名，比如：

output:{
    filename:"bundle.js"
}

这意味着入口文件属性entry如果以对象的形式配置多个文件，执行打包命令会抛出异常。

所以需要为多出口文件指定唯一的文件名，比如：

{
    entry:{
        index:'index.js',
        another:'another.js'
    },
    output:{
        filename:"bundle.[name].[id].[hash].js"
    }
}

这里[name]会被替换为index、another，[id]会被替换为0、1。

hash和chunkhash在文件名中是不可以共存的。配置hash或chunkhash可以解决服务器缓存的问题，只有文件修改才会变。

output.path：string，输出路径

而且filename属性也可以指定路径，比如：

{
    entry:{
        index:'index.js',
        another:'another.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"./js/bundle.[name].[id].[hash].js"
    }
}

那么实际输出的目录就是："dist/js/"。

如果不同的文件，想要输出不同的目录：

{
    entry:{
        index:'index.js',
        another:'another.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"./[name]/bundle.js"
    }
}

这样就会在dist目录下生成index、another目录。所以可以在entry的key上做文章。

output.publicPath：string，资源加载路径前缀

首先该值默认是""。

注意path和publicPath是不同的。path是打包文件所在的的路径，而publicPath是资源文件引入的路径前缀。比如：

{
    entry:{
        index:'index.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"bundle.[name].js",
        publicPath:"asset/"
    }
}

执行打包指令，所有的js、css等文件都在当前目录下的dist目录。但index.html这时引入js的路径就是：

<script src="asset/bundle.index.js"></script>

同样，css文件中的资源路径，比如图片、字体，也会有该前缀。如果发布到服务器，则需要把资源都放入到服务器asset目录下。

如果配置了publicPath会导致webpack-dev-server无法引入js文件，这个问题待定。